<script setup lang="ts">
const props = defineProps<{
  loading: boolean
  data: any[]
}>()
const tableData = computed(() => {
  const p = props.data[0]
  const s = props.data.slice(1)
  const ret = []
  for (const item of s) {
    const obj: Record<string, any> = {}
    for (const i in p) {
      const key = p[i]
      obj[key] = item[i]
    }
    ret.push(obj)
  }
  return ret
})
const columns = computed(() => {
  const s = props.data[0]
  return (s || []).map((v: any, index: number) => {
    return {
      key: uuid(),
      label: v,
      prop: v,
      align: 'center',
      minWidth: 160,
      fixed: index === 0 ? 'left' : false,
    }
  })
})
</script>

<template>
  <TableLists
    :lists="tableData" :loading="loading"
    :columns="columns" :show-toolbox="false"
  />
</template>
